<template>
	<view class="result-page" :style="{ backgroundImage: `url(${jgbjURL})` }">
		<view class="container">

			<!-- 顶部信息 -->
			<view class="info-row">
				<view class="info-card" @click="rotateTitlea" :class="{ rotated: rorareda }">
					提交时间：{{ startTime }}
				</view>
				<view class="info-card" @click="rotateTitleb" :class="{ rotated: roraredb }">
					用时：{{ duration }}
				</view>
			</view>

			<!-- 测评结果标题 -->
			<view class="result-header" :style="{ backgroundImage: `url(${BlueURL})` }">
				<text>测评结果</text>
			</view>

			<!-- 主内容卡片：一左一右 -->
			<view class="result-card split-layout">
				<!-- 左侧文本内容 -->
				<view class="text-summary">
					{{ dateResult.aiText }}
				</view>

				<!-- 右侧雷达图 -->
				<view class="chart-container">
					<careerResult></careerResult>
				</view>
			</view>

		</view>
	</view>
</template>


<script>
	import careerResult from '@/pages/careerModel/careerResult/careerEchart.vue'

	export default {
		components: {
			careerResult
		},
		data() {
			return {
				Results: {},
				dateResult: {},
				BlueURL: this.$baseURL + '/profile/upload/2025/05/10/Blue_20250508100002A087_20250510150725A056.png',
				jgbjURL: this.$baseURL + '/profile/upload/2025/05/10/jgbj_20250507101024A028_20250510150221A029.png',
				rorareda: false,
				roraredb: false,
				startTime: null,
				duration: ''
			}
		},
		onLoad(option) {
			try {
				const raw = decodeURIComponent(option.dateResult || '');
				this.dateResult = raw ? JSON.parse(raw) : {};
			} catch (e) {
				console.error('JSON解析失败:', e);
				this.dateResult = {};
			}

			this.startTime = this.dateResult.startTime || '';
			this.duration = this.dateResult.during || '';
			this.Results = this.dateResult.type || '';
		},
		methods: {
			rotateTitlea() {
				this.rorareda = !this.rorareda;
			},
			rotateTitleb() {
				this.roraredb = !this.roraredb;
			}
		}
	}
</script>

<style scoped>
	.result-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		/* 禁止滚动 */
		background-size: cover;
		background-position: center;
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		animation: fadeIn 0.8s ease-in-out;
	}

	.container {
		width: 100%;
		max-width: 1280px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 顶部提交信息样式 */
	.info-row {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 40rpx;
		margin-bottom: 30rpx;
	}

	.info-card {
		flex: 0 0 40%;
		background-color: #ffffffdd;
		padding: 24rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.6s;
	}

	.info-card.rotated {
		transform: rotateY(360deg);
	}

	/* 测评结果标题 */
	.result-header {
		width: 90%;
		max-width: 1900rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: left center;
		padding: 20rpx 0 40rpx 80rpx;
		text-align: left;
		font-size: 44rpx;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 30rpx;
	}

	/* 主内容卡片 */
	.result-card {
		width: 100%;
		background: #ffffffee;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		animation: zoomIn 1s ease-in-out;
	}

	/* 横向布局 */
	.split-layout {
		display: flex;
		flex-direction: row;
		gap: 30rpx;
		justify-content: space-between;
		align-items: stretch;
		height: 580rpx;
	}

	/* 文本内容区域 */
	.text-summary {
		flex: 1;
		font-size: 28rpx;
		line-height: 1.8;
		color: #333;
		overflow-y: auto;
		padding-right: 10rpx;
	}

	/* 雷达图区域 */
	.chart-container {
		flex: 1;
		border-radius: 24rpx;
		background: linear-gradient(to bottom right, #f0faff, #ffffff);
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes zoomIn {
		from {
			opacity: 0;
			transform: scale(0.95);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>